<template>
  <div class="search-page">
    <!-- 搜索条件显示 -->
    <div class="search-header">
      <h1 class="search-title">
        搜索结果：<span class="search-keyword">"{{ searchKeyword }}"</span>
      </h1>
      <div class="search-stats">
        找到 {{ totalResults }} 个结果
      </div>
    </div>

    <!-- 三栏结果展示 -->
    <div class="search-results">
      <!-- 图片结果 -->
      <div class="result-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z" fill="currentColor"/>
            </svg>
            图片 ({{ imageResults.length }})
          </h2>
          <button 
            class="toggle-btn" 
            @click="toggleImageSection"
            :class="{ 'toggle-btn--collapsed': !isImageSectionExpanded }"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
            </svg>
          </button>
        </div>
        <div class="cards-grid" v-show="isImageSectionExpanded">
          <div 
            v-for="item in imageResults" 
            :key="item.id"
            class="result-card image-card"
            @click="viewImage(item)"
          >
            <div class="card-image">
              <img :src="item.thumbnail" :alt="item.title" />
              <div class="card-overlay">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5S21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12S9.24 7 12 7S17 9.24 17 12S14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12S10.34 15 12 15S15 13.66 15 12S13.66 9 12 9Z" fill="white"/>
                </svg>
              </div>
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ item.title }}</h3>
              <p class="card-description">{{ item.description }}</p>
              <div class="card-meta">
                <span class="meta-item">{{ item.size }}</span>
                <span class="meta-item">{{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 视频结果 -->
      <div class="result-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z" fill="currentColor"/>
            </svg>
            视频 ({{ videoResults.length }})
          </h2>
          <button 
            class="toggle-btn" 
            @click="toggleVideoSection"
            :class="{ 'toggle-btn--collapsed': !isVideoSectionExpanded }"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
            </svg>
          </button>
        </div>
        <div class="cards-grid" v-show="isVideoSectionExpanded">
          <div 
            v-for="item in videoResults" 
            :key="item.id"
            class="result-card video-card"
            @click="playVideo(item)"
          >
            <div class="card-image">
              <img :src="item.thumbnail" :alt="item.title" />
              <div class="card-overlay">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 5V19L19 12L8 5Z" fill="white"/>
                </svg>
              </div>
              <div class="video-duration">{{ item.duration }}</div>
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ item.title }}</h3>
              <p class="card-description">{{ item.description }}</p>
              <div class="card-meta">
                <span class="meta-item">{{ item.views }} 次观看</span>
                <span class="meta-item">{{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 音乐结果 -->
      <div class="result-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21S14 19.21 14 17V7H18V3H12Z" fill="currentColor"/>
            </svg>
            音乐 ({{ musicResults.length }})
          </h2>
          <button 
            class="toggle-btn" 
            @click="toggleMusicSection"
            :class="{ 'toggle-btn--collapsed': !isMusicSectionExpanded }"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
            </svg>
          </button>
        </div>
        <div class="cards-grid" v-show="isMusicSectionExpanded">
          <div 
            v-for="item in musicResults" 
            :key="item.id"
            class="result-card music-card"
            @click="playMusic(item)"
          >
            <div class="card-image">
              <img :src="item.cover" :alt="item.title" />
              <div class="card-overlay">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 5V19L19 12L8 5Z" fill="white"/>
                </svg>
              </div>
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ item.title }}</h3>
              <p class="card-description">{{ item.artist }}</p>
              <div class="card-meta">
                <span class="meta-item">{{ item.duration }}</span>
                <span class="meta-item">{{ item.album }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="totalResults === 0" class="empty-state">
      <div class="empty-icon">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#ccc"/>
        </svg>
      </div>
      <h3 class="empty-title">没有找到相关内容</h3>
      <p class="empty-description">
        尝试使用其他关键词或检查拼写
      </p>
      <button class="back-btn" @click="$router.go(-1)">
        返回上一页
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 定义数据类型
interface ImageResult {
  id: number
  title: string
  description: string
  thumbnail: string
  size: string
  date: string
}

interface VideoResult {
  id: number
  title: string
  description: string
  thumbnail: string
  duration: string
  views: number
  date: string
}

interface MusicResult {
  id: number
  title: string
  artist: string
  cover: string
  duration: string
  album: string
}

// 搜索关键词
const searchKeyword = ref('')

// 搜索结果数据
const imageResults = ref<ImageResult[]>([])
const videoResults = ref<VideoResult[]>([])
const musicResults = ref<MusicResult[]>([])

// 栏目展开收起状态
const isImageSectionExpanded = ref(true)
const isVideoSectionExpanded = ref(true)
const isMusicSectionExpanded = ref(true)

// 计算总结果数
const totalResults = computed(() => 
  imageResults.value.length + videoResults.value.length + musicResults.value.length
)

// 模拟搜索数据
const mockSearchData = {
  images: [
    {
      id: 1,
      title: '三毛流浪记 - 经典场景1',
      description: '三毛在街头的温馨瞬间',
      thumbnail: '/static/images/image1.jpg',
      size: '1920x1080',
      date: '2024-01-15'
    },
    {
      id: 2,
      title: '三毛流浪记 - 经典场景2',
      description: '三毛与小伙伴们的快乐时光',
      thumbnail: '/static/images/image2.jpg',
      size: '1920x1080',
      date: '2024-01-16'
    },
    {
      id: 3,
      title: '三毛流浪记 - 经典场景3',
      description: '三毛的冒险旅程',
      thumbnail: '/static/images/image3.jpg',
      size: '1920x1080',
      date: '2024-01-17'
    },
    {
      id: 4,
      title: '三毛流浪记 - 经典场景4',
      description: '三毛与朋友们的欢乐时光',
      thumbnail: '/static/images/image4.jpg',
      size: '1920x1080',
      date: '2024-01-18'
    },
    {
      id: 5,
      title: '三毛流浪记 - 经典场景5',
      description: '三毛的奇妙冒险',
      thumbnail: '/static/images/image5.jpg',
      size: '1920x1080',
      date: '2024-01-19'
    },
    {
      id: 6,
      title: '三毛流浪记 - 经典场景6',
      description: '三毛探索新世界',
      thumbnail: '/static/images/image6.jpg',
      size: '1920x1080',
      date: '2024-01-20'
    }
  ],
  videos: [
    {
      id: 1,
      title: '三毛流浪记 - 第一集',
      description: '三毛开始了他的流浪之旅',
      thumbnail: '/static/images/image7.jpg',
      duration: '15:30',
      views: 1234,
      date: '2024-01-10'
    },
    {
      id: 2,
      title: '三毛流浪记 - 第二集',
      description: '三毛遇到了新朋友',
      thumbnail: '/static/images/image8.jpg',
      duration: '18:45',
      views: 2345,
      date: '2024-01-11'
    },
    {
      id: 3,
      title: '三毛流浪记 - 第三集',
      description: '三毛的奇妙冒险继续',
      thumbnail: '/static/images/image9.jpg',
      duration: '22:15',
      views: 3456,
      date: '2024-01-12'
    },
    {
      id: 4,
      title: '三毛流浪记 - 第四集',
      description: '三毛发现了新的秘密',
      thumbnail: '/static/images/image10.jpg',
      duration: '20:30',
      views: 4567,
      date: '2024-01-13'
    }
  ],
  music: [
    {
      id: 1,
      title: '三毛之歌',
      artist: '经典儿歌',
      cover: '/static/images/image11.jpg',
      duration: '3:25',
      album: '经典儿歌集'
    },
    {
      id: 2,
      title: '流浪的小三毛',
      artist: '怀旧金曲',
      cover: '/static/images/image12.jpg',
      duration: '4:12',
      album: '怀旧金曲集'
    },
    {
      id: 3,
      title: '三毛的冒险',
      artist: '儿童音乐',
      cover: '/static/images/image13.jpg',
      duration: '3:58',
      album: '儿童音乐集'
    },
    {
      id: 4,
      title: '三毛和朋友们',
      artist: '动画原声',
      cover: '/static/images/image14.jpg',
      duration: '4:35',
      album: '动画原声带'
    }
  ]
}

// 执行搜索
const performSearch = (keyword: string) => {
  // 模拟搜索逻辑 - 根据关键词过滤数据
  const lowerKeyword = keyword.toLowerCase()
  
  // 过滤图片
  imageResults.value = mockSearchData.images.filter(item => 
    item.title.toLowerCase().includes(lowerKeyword) ||
    item.description.toLowerCase().includes(lowerKeyword)
  )
  
  // 过滤视频
  videoResults.value = mockSearchData.videos.filter(item => 
    item.title.toLowerCase().includes(lowerKeyword) ||
    item.description.toLowerCase().includes(lowerKeyword)
  )
  
  // 过滤音乐
  musicResults.value = mockSearchData.music.filter(item => 
    item.title.toLowerCase().includes(lowerKeyword) ||
    item.artist.toLowerCase().includes(lowerKeyword) ||
    item.album.toLowerCase().includes(lowerKeyword)
  )
}

// 查看图片
// @ts-ignore
const viewImage = (item: any) => {
  // 可以打开图片查看器或跳转到画廊页面
  router.push('/gallery')
}

// 播放视频
const playVideo = (item: any) => {
  // 跳转到视频详情页
  router.push(`/video/${item.id}`)
}

// 播放音乐
const playMusic = (item: any) => {
  // 跳转到音乐页面
  router.push(`/music/${item.id}`)
}

// 组件挂载时执行搜索
onMounted(() => {
  const keyword = route.query.q as string
  if (keyword) {
    searchKeyword.value = keyword
    performSearch(keyword)
  }
})

// 切换栏目展开收起状态
const toggleImageSection = () => {
  isImageSectionExpanded.value = !isImageSectionExpanded.value
}

const toggleVideoSection = () => {
  isVideoSectionExpanded.value = !isVideoSectionExpanded.value
}

const toggleMusicSection = () => {
  isMusicSectionExpanded.value = !isMusicSectionExpanded.value
}
</script>

<style scoped>
.search-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.search-header {
  max-width: 1200px;
  margin: 0 auto 30px auto;
  text-align: center;
}

.search-title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 700;
}

.search-keyword {
  color: #646cff;
}

.search-stats {
  font-size: 1.1rem;
  color: #666;
  font-weight: 500;
}

.search-results {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.result-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.section-header {
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.8rem;
  color: #333;
  font-weight: 700;
  margin: 0;
}

.toggle-btn {
  background: rgba(100, 108, 255, 0.1);
  border: 1px solid rgba(100, 108, 255, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #646cff;
}

.toggle-btn:hover {
  background: rgba(100, 108, 255, 0.2);
  border-color: rgba(100, 108, 255, 0.5);
  transform: scale(1.05);
}

.toggle-btn--collapsed {
  transform: rotate(180deg);
}

.toggle-btn--collapsed:hover {
  transform: rotate(180deg) scale(1.05);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.result-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.result-card:hover .card-image img {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.result-card:hover .card-overlay {
  opacity: 1;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.card-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #999;
}

.meta-item {
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  max-width: 500px;
  margin: 0 auto;
}

.empty-icon {
  margin-bottom: 30px;
}

.empty-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
  font-weight: 700;
}

.empty-description {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.back-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #525add;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(100, 108, 255, 0.3);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .search-page {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
  
  .search-title,
  .section-title,
  .card-title {
    color: #f8f9fa;
  }
  
  .search-stats,
  .card-description {
    color: #adb5bd;
  }
  
  .result-section,
  .result-card {
    background: rgba(52, 73, 94, 0.9);
    color: #f8f9fa;
  }
  
  .toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #f8f9fa;
  }
  
  .toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-page {
    padding: 15px;
  }
  
  .search-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .result-section {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .search-title {
    font-size: 1.8rem;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .card-image {
    height: 150px;
  }
}

/* 夜间模式适配 */
body.dark-mode .search-page {
  background: linear-gradient(135deg, #23242a 0%, #2c3e50 100%) !important;
}

body.dark-mode .search-title,
body.dark-mode .section-title,
body.dark-mode .card-title {
  color: #f8f9fa !important;
}

body.dark-mode .search-stats,
body.dark-mode .card-description {
  color: #adb5bd !important;
}

body.dark-mode .result-section,
body.dark-mode .result-card {
  background: rgba(44, 62, 80, 0.95) !important;
  color: #f8f9fa !important;
}

body.dark-mode .toggle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f8f9fa !important;
}

body.dark-mode .toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

body.dark-mode .card-meta,
body.dark-mode .meta-item {
  color: #b0b8c1 !important;
  background: #23242a !important;
}

body.dark-mode .empty-state {
  background: none !important;
}

body.dark-mode .empty-title {
  color: #f8f9fa !important;
}

body.dark-mode .empty-description {
  color: #adb5bd !important;
}

body.dark-mode .back-btn {
  background: #535bf2 !important;
  color: #fff !important;
}

body.dark-mode .back-btn:hover {
  background: #646cff !important;
}
</style>